<template>
   <div class="shop-cart">
      <div class="shopcart">
         <div class="content">
            <div class="content-left" @click="showCartList">
               <div class="logo-wrapper">
                  <div class="logo highlight">
                     <i class="iconfont icon-shopping_cart" :class="{highlight: carts.length}"></i>
                  </div>
                  <div class="num" v-show="carts.length">{{getCount}}</div>
               </div>
               <div class="price" :class="{highlight:carts.length}">￥{{getTotalMoney}}</div>
               <div class="desc">另需配送费￥{{shop.fee}} 元</div>
            </div>
            <div class="content-right">
               <div class="pay not-enough" :class="{highlight:carts.length}" v-if="getMinimum > 0" @click="alertLackMoney">结算</div>
               <div class="pay enough highlight" v-if="getMinimum <= 0" @click="settlement">结算</div>
            </div>
         </div>
         <div class="shopcart-list" v-show="carts.length && show_msk">
            <div class="list-header" v-show="carts.length">
               <h1 class="title">购物车</h1>
               <span class="empty" @click="clearCarts">清空</span>
            </div>
            <div class="list-content">
               <ul>
                  <li class="food" v-for="item of carts" :key="item.id">
                     <span class="name">{{item.foodname}}</span>
                     <div class="price"><span>￥{{item.price}}</span></div>
                     <div class="cartcontrol-wrapper">
                        <div class="cartcontrol">
                           <div class="iconfont icon-remove_circle_outline" @click.prevent="updateCount(false, item.id)"></div>
                           <div class="cart-count">{{item.count}}</div>
                           <div class="iconfont icon-add_circle" @click.prevent="updateCount(true, item.id)"></div>
                        </div>
                     </div>
                  </li>
               </ul>
            </div>
         </div>
      </div>
      <div class="list-mask" v-show="show_msk && carts.length" @click="show_msk = false"></div>
   </div>
</template>

<script>
//vuex
import { mapState, mapGetters, mapMutations } from 'vuex'
//mui
import { MessageBox, Toast } from 'mint-ui';

export default {
   name: 'ShopCaart', // 购物车组件
   data() {
      return {
         show_msk: false, //是否显示购菜单遮罩层
      }
   },
   computed: {
      ...mapState('mstite', ['carts', 'shop']),
      ...mapState('profile', ['userInfo']),
      ...mapGetters('mstite', ['getTotalMoney']),
      /* 获取购车中的商品数量 */
      getCount() {
         return this.carts.reduce((prev, food) => prev += food.count, 0)
      },
      /* 获取起送价 */
      getMinimum() {
         return Number(this.shop.fee) - Number(this.getTotalMoney)
      }
   },
   methods: {
      ...mapMutations('mstite', ['UPDATE_GOODS_COUNT', 'CLEAR_CARTS']),
      ...mapMutations('account', ['ADD_CARTS_TO_MYGOODS']),
      /**
       * 更新商品数量
       * @param {Boolean} type 指定操作类型 加法/减法
       * @param {Number} foodId 商品ID值
       */
      updateCount(type, foodId) {
         this.UPDATE_GOODS_COUNT({ type, foodId})
      },
      /* 清除购物车 */
      clearCarts() {
         MessageBox.confirm('确定清空购物车吗?').then(()=>{
            this.CLEAR_CARTS()
            this.show_msk = false
         },()=>{});
      },
      /* 点击展示购物车列表 */
      showCartList() {
         if (!this.carts.length) return Toast('您未添加商品')
         this.show_msk = !this.show_msk
      },
      /* 去就算 */
      settlement() {
         // 将购物车中的所有商品添加到【结算页-account】
         for (let obj of this.carts) {
            obj.shopname = this.shop.shopname
            delete obj.id
            obj.shoplist_id = this.shop.id
         }
         this.ADD_CARTS_TO_MYGOODS(JSON.stringify(this.carts))
         this.$router.push('/address/' + this.$route.params.id)
      },
      /* 弹出缺少的价格 */
      alertLackMoney() {
         Toast(`还差￥${this.getMinimum}元起送`)
      }
   }
}
</script>

<style lang="stylus" scoped>
@import '../../common/stylus/mixins.styl';

.shopcart {
   position: fixed;
   left: 50%;
   bottom: 8px;
   transform: translateX(-50%);
   z-index: 103;
   width: 100%;
   max-width: 750px;
   height: 48px;

   .content {
      display: flex;
      background: #141d27;
      font-size: 0;
      color: rgba(255, 255, 255, 0.4);

      .content-left {
         flex: 1;
         cursor: pointer;
         .logo-wrapper {
            display: inline-block;
            vertical-align: top;
            position: relative;
            top: -10px;
            margin: 0 12px;
            padding: 6px;
            width: 56px;
            height: 56px;
            box-sizing: border-box;
            border-radius: 50%;
            background: #141d27;

            .logo {
               width: 100%;
               height: 100%;
               border-radius: 50%;
               text-align: center;
               background: #2b343c;

               &.highlight {
                  background: $green;
               }

               .icon-shopping_cart {
                  line-height: 44px;
                  font-size: 24px;
                  color: #80858a;

                  &.highlight {
                     color: #fff;
                  }
               }
            }

            .num {
               position: absolute;
               top: 0;
               right: 0;
               width: 20px;
               height: 20px;
               line-height: 20px;
               text-align: center;
               border-radius: 50%;
               font-size: 9px;
               font-weight: 700;
               color: #ffffff;
               background: rgb(240, 20, 20);
               box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.4);
            }
         }

         .price {
            display: inline-block;
            vertical-align: top;
            margin-top: 5px;
            line-height: 24px;
            padding-right: 12px;
            box-sizing: border-box;
            font-size: 16px;
            font-weight: 700;
            color: #80858a;

            &.highlight {
               color: #fff;
            }
         }

         .desc {
            display: inline-block;
            vertical-align: bottom;
            margin-bottom: 15px;
            margin-left: -45px;
            font-size: 10px;
         }
      }

      .content-right {
         flex: 0 0 105px;
         width: 105px;

         .pay {
            height: 56px;
            line-height: 56px;
            text-align: center;
            font-size: 12px;
            font-weight: 700;
            color: #80858a;

            &.not-enough {
               background: #2b333b;
            }

            &.enough {
               background: #00b43c;
               color: #fff;
               cursor pointer
            }

            &.highlight { color: #fff;}
         }
      }
   }

   .ball-container {
      .ball {
         position: fixed;
         left: 32px;
         bottom: 22px;
         z-index: 200;
         transition: all 0.4s cubic-bezier(0.49, -0.29, 0.75, 0.41);

         .inner {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: $green;
            transition: all 0.4s linear;
         }
      }
   }

   .shopcart-list {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      width: 100%;
      transform: translateY(-100%);

      &.move-enter-active, &.move-leave-active {
         transition: transform 0.3s;
      }

      &.move-enter, &.move-leave-to {
         transform: translateY(0);
      }

      .list-header {
         height: 40px;
         line-height: 40px;
         padding: 0 18px;
         background: #f3f5f7;
         border-bottom: 1px solid rgba(7, 17, 27, 0.1);

         .title {
            float: left;
            font-size: 14px;
            color: rgb(7, 17, 27);
         }

         .empty {
            float: right;
            font-size: 12px;
            color: rgb(0, 160, 220);
            cursor pointer
         }
      }

      .list-content {
         padding: 0 18px;
         max-height: 217px;
         overflow: hidden;
         background: #fff;

         .food {
            position: relative;
            padding: 12px 0;
            box-sizing: border-box;
            bottom-border-1px(rgba(7, 17, 27, 0.1));

            .name {
               line-height: 24px;
               font-size: 14px;
               color: rgb(7, 17, 27);
            }

            .price {
               position: absolute;
               right: 90px;
               bottom: 12px;
               line-height: 24px;
               font-size: 14px;
               font-weight: 700;
               color: rgb(240, 20, 20);
            }

            .cartcontrol-wrapper {
               position: absolute;
               right: 0;
               top: 50%;
               transform: translateY(-50%);
               >.cartcontrol { display: flex; }
               .cart-count { margin: 0 4px}
               .iconfont { color: #02a774; font-size: 18px; cursor pointer}
            }
         }
      }
   }
}

.list-mask {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 102;
   backdrop-filter: blur(10px);
   opacity: 1;
   background: rgba(7, 17, 27, 0.6);

   &.fade-enter-active, &.fade-leave-active {
      transition: all 0.5s;
   }

   &.fade-enter, &.fade-leave-to {
      opacity: 0;
      background: rgba(7, 17, 27, 0);
   }
}
</style>